<template>
  <div class="ssc-search">
    <a-row :gutter="24">
      <a-col :span="6">
        <a-form-item label="申请日期">
          <a-range-picker v-model:value="searchForm.publishTime" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
        </a-form-item>
      </a-col>
      <a-col :span="4">
        <a-form-item v-bind="validateInfos.name">
          <a-input v-model:value="searchForm.name" placeholder="请输入关键词搜索" />
        </a-form-item>
      </a-col>
      <a-col :span="14">
        <a-row justify="end">
          <a-button @click="clear()">重置</a-button>
          <a-button class="ml-4" type="primary" @click="search()">查询</a-button>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
  import { Form } from 'ant-design-vue'
  import { nextTick, onMounted, reactive, toRaw } from 'vue'

  const emit = defineEmits<(e: 'search', params: TradeTypes.SearchData) => void>()
  const searchForm = reactive<TradeTypes.SearchData>({
    publishTime: '',
    name: '',
  })

  const { validate, validateInfos, resetFields } = Form.useForm(searchForm, {})

  // 查询
  const clear = () => {
    resetFields()
  }

  // 查询
  const search = () => {
    validate().then(() => {
      nextTick(() => {
        emit('search', {
          ...toRaw(searchForm),
        })
      })
    })
  }

  onMounted(() => {
    search()
  })
</script>
<style lang="less" scoped></style>
